<template>
  <div id="echarts">
    <div class="box" ref="box">
      <div class="row">
        <el-tabs
          type="border-card"
          v-model="activeNameCaipin"
          @tab-click="handleClickCaipin"
        >
          <el-tab-pane>
            <span slot="label"
              ><i class="el-icon-date"></i> 菜品点餐总排名</span
            >
          </el-tab-pane>
          <el-tab-pane label="菜品点餐月排名"></el-tab-pane>
          <el-tab-pane label="菜品点餐周排名"></el-tab-pane>
        </el-tabs>
        <div id="myChartCaipin" :style="{ height: height, width: width }"></div>
      </div>
      <div class="row"></div>
      <!-- <div class="row">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"
              ><i class="el-icon-date"></i> 菜品好评总排名</span
            >
            菜品好评总排名榜
          </el-tab-pane>
          <el-tab-pane label="菜品好评月排名榜">菜品好评月排名</el-tab-pane>
          <el-tab-pane label="菜品好评周排名榜">菜品好评周排名</el-tab-pane>
        </el-tabs>
      </div> -->
      <div class="row">
        <el-tabs type="border-card">
          <el-tab-pane>
            <span slot="label"
              ><i class="el-icon-date"></i> 个人点餐总排名</span
            >
            个人点餐排名榜
          </el-tab-pane>
          <!-- <el-tab-pane label="个人点餐月排名榜">个人点餐月排名</el-tab-pane>
          <el-tab-pane label="个人点餐周排名榜">个人点餐周排名</el-tab-pane> -->
        </el-tabs>
        <div id="myChartCaipinMyself" :style="{ height: height, width: width }"></div>
      </div>
    </div>
  </div>
</template>
<script>
import { getEchartsData,getEchartsDataMyself, getYonghu,testDown } from "@/api/api";
import Axios from 'axios';
export default {
  data() {
    return {
      myChartCaipin: "",
      myChartCaipinMyself: "",
      height: "200px",
      width: "",
      activeNameCaipin: "",
      echartsObj: {},
      nameArr: [],
      numArr: [],

      echartsObjMyself: {},
      nameArrMyself: [],
      numArrMyself: [],
      
    };
  },
  created() {
    this.$nextTick(()=>{
      const headers = {}
      headers.token = localStorage.getItem('token')
      headers['Content-Type'] = 'application/json'
      Axios.defaults.headers = headers
      Axios.defaults.responseType = 'blob'
      Axios.post("http://localhost:8067/admin/user/exportUserList",{ responseType: 'blob' }).then(res=>{
        const stream = res.data // 后端用stream返回Excel文件
        const blob = new Blob([stream])
        const aEle = document.createElement('a') // 创建a标签
        const href = window.URL.createObjectURL(blob) // 创建下载的链接
        aEle.href = href
        aEle.download = `供应商检验合格率.xlsx` // 下载后文件名
        document.body.appendChild(aEle)
        aEle.click() // 点击下载
      })
      // testDown({}).then(response=>{
      //   const filename = `qin.xlsx`
      //   const eleLink = document.createElement('a')
      //   eleLink.download = filename
      //   eleLink.style.display = 'none'

      //   // debugger
      //   const blob = new Blob([response])
      //   // const blob = new Blob([response])
      //   eleLink.href = window.URL.createObjectURL(blob) // 字符内容转变成blob地址
      //   // eleLink.href = response["data"] // 字符内容转变成blob地址

      //   document.body.appendChild(eleLink)
      //   eleLink.click() // 触发点击
      // })
    })
    // this.drawLineCaipin();
    this.$nextTick(() => {
      this.width = this.$refs.box.clientWidth - 50 + "px";
      getEchartsData()
        .then((res) => {
          this.echartsObj = res;
          this.nameArr = this.echartsObj["caipinTotal"]["nameArr"];
          this.numArr = this.echartsObj["caipinTotal"]["numArr"];
          this.drawLineCaipin();
        })
        .catch((error) => {});
    });
    window.addEventListener("resize", this.resizeChart);

    this.$nextTick(() => {
      this.width = this.$refs.box.clientWidth - 50 + "px";
      getEchartsDataMyself()
        .then((res) => {
          this.echartsObjMyself = res;
          this.nameArrMyself = this.echartsObjMyself["caipinTotal"]["nameArr"];
          this.numArrMyself = this.echartsObjMyself["caipinTotal"]["numArr"];
          this.drawLineCaipinMyself();
        })
        .catch((error) => {});
    });

    window.addEventListener("resize", this.resizeChartMyself);
  },

  methods: {
    handleClickCaipin(tab, event) {
      console.log(this.activeNameCaipin);
      switch (this.activeNameCaipin) {
        case "0": {
          this.nameArr = this.echartsObj["caipinTotal"]["nameArr"];
          this.numArr = this.echartsObj["caipinTotal"]["numArr"];
          break;
        }
        case "1": {
          this.nameArr = this.echartsObj["caipinMonth"]["nameArr"];
          this.numArr = this.echartsObj["caipinMonth"]["numArr"];
          break;
        }
        case "2": {
          this.nameArr = this.echartsObj["caipinWeek"]["nameArr"];
          this.numArr = this.echartsObj["caipinWeek"]["numArr"];
          break;
        }
        default: {
        }
      }
      this.drawLineCaipin(this.activeNameCaipin);
      // 绘制图表
    },
    drawLineCaipin(activeIndex) {
      // 基于准备好的dom，初始化echarts实例
      // alert()
      if (activeIndex == undefined) {
        console.log("qin");
        this.myChartCaipin = this.$echarts.init(
          document.getElementById("myChartCaipin")
        );
      }

      // 绘制图表
      this.myChartCaipin.setOption({
        title: { text: "", top: 0 },
        tooltip: {},
        xAxis: {
          data: this.nameArr,
          axisLabel: {
            color: "red",
            //  让x轴文字方向为竖向
            interval: 0,
            formatter: function (value) {
            },
          },
        },
        yAxis: {
          axisLabel: {
            color: "black",
          },
        },
        grid: {
          x: 50,
          y: 20,
          x2: 0,
          y2: 20,
        },
        label: {
          show: true,
          position: "insideBottom",
          color: "white",
          fontSize:16,
          formatter: function (params) {
            let txtArry = params.name.split("");
            let rs = "";
            for (var i = 0; i < txtArry.length; i++) {
              rs += txtArry[i] + "\n";
            }
            return rs;
          },
        },
        series: [
          {
            name: "点餐量",
            type: "bar",
            data: this.numArr,
            showBackground: true,
            backgroundStyle: {
              backgroundColor:"red",
              color: "#524f44",
              barBorderRadius: [12, 12, 12, 12],
            },
            itemStyle: {
              normal: {
                //柱形图圆角，顺时针左上，右上，右下，左下）
                barBorderRadius: [12, 12, 12, 12],
                //设置柱状图颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#ffc300",
                  },
                  {
                    offset: 1,
                    color: "#ffc300",
                  },
                ]),
              },
            },
          },
        ],
      });
      this.myChartCaipin.resize();
    },
    resizeChart() {
      this.width = this.$refs.box.clientWidth - 50 + "px";
      this.myChartCaipin.resize();
    },
    drawLineCaipinMyself(activeIndex) {
      // 基于准备好的dom，初始化echarts实例
      // alert()
      if (activeIndex == undefined) {
        console.log("qin");
        this.myChartCaipinMyself = this.$echarts.init(
          document.getElementById("myChartCaipinMyself")
        );
      }

      // 绘制图表
      this.myChartCaipinMyself.setOption({
        title: { text: "", top: 0 },
        tooltip: {},
        xAxis: {
          data: this.nameArrMyself,
          axisLabel: {
            color: "red",
            //  让x轴文字方向为竖向
            interval: 0,
            formatter: function (value) {
            },
          },
        },
        yAxis: {
          axisLabel: {
            color: "black",
          },
        },
        grid: {
          x: 50,
          y: 20,
          x2: 0,
          y2: 20,
        },
        label: {
          show: true,
          position: "insideBottom",
          color: "white",
          fontSize:16,
          formatter: function (params) {
            let txtArry = params.name.split("");
            let rs = "";
            for (var i = 0; i < txtArry.length; i++) {
              rs += txtArry[i] + "\n";
            }
            return rs;
          },
        },
        series: [
          {
            name: "点餐量",
            type: "bar",
            data: this.numArrMyself,
            showBackground: true,
            backgroundStyle: {
              backgroundColor:"red",
              color: "#524f44",
              barBorderRadius: [12, 12, 12, 12],
            },
            itemStyle: {
              normal: {
                //柱形图圆角，顺时针左上，右上，右下，左下）
                barBorderRadius: [12, 12, 12, 12],
                //设置柱状图颜色渐变
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#ffc300",
                  },
                  {
                    offset: 1,
                    color: "#ffc300",
                  },
                ]),
              },
            },
          },
        ],
      });
      this.myChartCaipinMyself.resize();
    },
    resizeChartMyself() {
      this.width = this.$refs.box.clientWidth - 50 + "px";
      this.myChartCaipinMyself.resize();
    },
  },
};
</script>
<style lang="stylus">
#echarts {
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: url('../../assets/login_bg.svg');
  .el-tabs--border-card {
    border: none;
    box-shadow: none;
  }

  .el-tabs__content {
    display: none;
  }
}
</style>
<style lang="stylus" scoped>
#echarts {
  width: 100%;
  height: 100%;
  position: absolute;
  box-sizing: border-box;
  padding: 20px;

  .box {
    height: 100%;

    .row {
      width: 100%;
      border: 1px solid #DCDFE6;
      box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
      margin: 10px 0;
    }
  }
}
</style>